<!DOCTYPE html>
<html lang="en">
<head>
    <title>用户信息编辑</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/plugin/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="/plugin/adminlte/css/adminlte.min.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="/plugin/bootstrap-font/bootstrap-icons.min.css">
    <script src="/plugin/jquery-3.7.1.min.js"></script>
    <script src="/plugin/adminlte/js/popper.min.js"></script>
    <script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="/plugin/adminlte/js/adminlte.min.js"></script>
    <script src="/plugin/axios.min.js"></script>

    <style>
        body {
            background: url('/assets/img/food/chaohuasheng.jpg') no-repeat center center fixed;
            background-size: cover;
            font-family: 'Arial', sans-serif;
        }

        .app-wrapper {
            background: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            margin: 50px auto;
            max-width: 500px;
        }

        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        label {
            font-weight: bold;
            color: #555;
        }

        .btn {
            width: 48%;
        }

        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }

        .btn-warning {
            background-color: #ffc107;
            border-color: #ffc107;
        }

        .alert {
            text-align: center;
            margin-top: 15px;
        }

        .hidden {
            display: none;
        }

        /* 响应式设计 */
        @media (max-width: 600px) {
            .app-wrapper {
                width: 90%;
            }
        }

        body {
            background-image: url('/assets/img/food/manyufan.jpg');
            background-size: cover;
            background-position: center;
            font-family: Arial, sans-serif;
        }

    </style>
</head>
<body onload="getuseralt()">
<div class="container mt-5" style="max-width: 600px;">
    <div class="card" style="background-color: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 10px;">
        <h3 class="text-center">用户信息修改</h3>
        <div class="mb-3">
            <input type="hidden" id="user_id" name="id">
            <label for="user_name">姓名</label>
            <input type="text" class="form-control" id="user_name" name="name" placeholder="姓名">
        </div>
        <div class="mb-3">
            <label for="user_username">用户名</label>
            <input type="text" class="form-control" id="user_username" name="username" placeholder="用户名">
        </div>
        <div class="mb-3">
            <label for="user_gender">性别</label>
            <input type="text" class="form-control" id="user_gender" name="gender" placeholder="性别">
        </div>
        <div class="mb-3">
            <label for="user_tel">电话</label>
            <input type="text" class="form-control" id="user_tel" name="tel" placeholder="电话">
        </div>
        <div class="mb-3">
            <label for="user_address">地址</label>
            <input type="text" class="form-control" id="user_address" name="address" placeholder="地址">
        </div>
        <div class="mb-3 text-center">
            <a href="javascript:void(0)" onclick="history.back()" class="btn btn-warning">返回</a>
            <input type="button" value="保存修改" class="btn btn-primary" onclick="updateuser()">
            <div class="alert alert-success hidden" role="alert" id="showSuccess" style="margin-top: 5px;width:200px; margin-left: auto; margin-right: auto;">
                更新成功
            </div>
        </div>
    </div>
</div>


<script>
    function getuseralt() {
        const searchParams = new URLSearchParams(window.location.search);
        const sid = searchParams.get('id');

        axios.get("/api/admin/useralt", {
            params: {
                id: sid
            }
        }).then(res => {
            const user = res.data;
            console.log(user)
            document.getElementById("user_name").value = user.realname;
            document.getElementById("user_username").value = user.username;
            document.getElementById("user_gender").value = user.gender;
            document.getElementById("user_tel").value = user.tel;
            document.getElementById("user_address").value = user.address;
        })
    }

    function updateuser() {
        const searchParams = new URLSearchParams(window.location.search);
        const sid = searchParams.get('id');
        console.log('更新数据');

        const uname = document.getElementById("user_name").value;
        const uusername = document.getElementById("user_username").value;
        const ugender = document.getElementById("user_gender").value;
        const utel = document.getElementById("user_tel").value;
        const uaddress = document.getElementById("user_address").value ;
        const dataToUpdate = {
            id: sid,
            realname: uname,
            username: uusername,
            gender: ugender,
            tel: utel,
            address: uaddress,
        }
        axios.post("/api/admin/userhome/saveOrUpdate", dataToUpdate)
            .then(res => {
                if (res.data === 'ok') {
                    alert('更新成功');
                    $("#showSuccess").removeClass("hidden");
                }
            })
    }
</script>
</body>
</html>